<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
</head>
<style>
    body {
        background: #EAD0B2;
    }

    canvas {
        display: block;
        margin: 50px auto 20px;
        box-shadow: -2px -2px 2px #D2B89B, 5px 5px 5px #A28F78;
        background: #EAD0B2 url();
    }

    #test {
        color: #0f0;
        position: absolute;
        padding: 20px;
        background: #010101;
        width: 80px;
        display: none;
    }

    #handler {
        text-align: center;
        width: 450px;
        margin: 0 auto;
    }

    #handler a {
        display: inline-block;
        padding: 5px 18px;
        text-decoration: none;
    }

    #handler a.btn-reset {
        background: #482242;
        color: #fff;
        box-shadow: 0 0 5px #4A090B;
        border-bottom: 2px solid #000;
        border-radius: 5px;
    }

    #handler a.btn-reset:active {
        margin-top: 2px;
        border-bottom: 0 none;
    }
</style>
<body>
<div id="test">
    <p><span id="x">0</span>列</p>
    <p><span id="y">0</span>行</p>
    <p><span id="score">0</span>分</p>
</div>
<canvas height="450px" id="chess" width="450px"></canvas>
<div id="handler">
    <a class="btn-reset" href="javascript:;" id="reset">重新开始</a>
    <div style="display: flex">
        <div>
            <label for="ai">启用AI对手</label><input checked="checked" id="ai" name="ai" type="radio"/>
        </div>
        <div>
            <label for="deepseek">启用deepseekAI</label><input id="deepseek" name="ai" type="radio"/>
        </div>
        <div>
            <label for="chatgpt">启用GPT4AI</label><input id="chatgpt" name="ai" type="radio"/>
        </div>
    </div>
    <textarea id="cb"></textarea>
    <button id="btn">渲染</button>
</div>
<script src="./ai.js"></script>
<script src="https://hoppinzq.com/static/js/vendor/jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            // 你是一个五子棋大师，你是白棋，你要想尽一切办法将5个白棋完整地连在一起，并阻止5个黑棋完整地连在一起。
            // 每次我都会给你一个五子棋棋盘的状态，用15x15的二维数组表示，0表示空，1表示黑棋，2表示白棋。你执的是白棋，黑棋先行。
            // 你需要给出下一步的落子位置，格式为：x,y，例如：1,2。注意棋盘最左上角为原点，即0,0，而最右下角是15,15。你需要严格按照这个格式输出，不要有任何多余的内容。
            let cs = $("#cb").val().split(",");
            oneStep(cs[0], cs[1], false);
        })
    })
</script>
</body>
</html>
